import React from 'react'
import classnames from 'classnames'
import { Style } from 'react-imvc/component'
import Connect from '../Connect'
import Top from './Top'
import SelfSupportTop from './SelfSupportTop'
import Nav from './Nav'
import Footer from './Footer'
import Loading from '../Loading'
import Modal from '../Modal'
import Tips from '../Tips'
import LogoutConfirmModal from '../../share/components/modal/LogoutConfirmModal'
import SwitchModuleModal from '../../share/components/modal/SwitchModuleModal'

class AnimateWrapper extends React.Component {
  state = {
    show: this.props.open || false
  }
  componentWillReceiveProps(nextProps) {
    // 展示动画
    if (!this.state.show && nextProps.open) {
      this.setState({
        show: nextProps.open
      })
    }
  }
  componentDidUpdate(prevProps, prevState) {
    // 不展示动画
    if (prevProps.open && !this.props.open) {
      setTimeout(() => {
        this.setState({
          show: false
        })
      }, this.props.time || 750)
    }
  }
  render() {
    let { as: Tag } = this.props
    if (!Tag || !this.state.show) {
      return null
    }
    
    const className = classnames(this.props.className, {
      [this.props.show]: this.props.open,
      [this.props.hide]: !this.props.open
    })
    return <Tag {...this.props} className={className} />
  }
}

function AnimateProxy(props) {
  return <AnimateWrapper as={SwitchModuleModal} {...props} />
}

const proxify = Wrapper => {
  return Inner => {
    return props => {
      return (
        <Wrapper as={Inner} {...props} />
      )
    }
  }
}

const Animate = proxify(AnimateWrapper)(SwitchModuleModal)

export default function Layout(props) {
  const {
    noFooter,
    applyNewStyle,
    state,
    children,
  } = props
  const { loadingModal, isOrderPackage } = state
  // add a middle layer to solve the problem
  return (
    <div>
      <Style name='header' />
      {!applyNewStyle && <Style name='vbooking' />}
      {applyNewStyle && <Style name='vbooking_route' />}
      <Style name="animation" />
      <Style name="style" />
      {false && <Connect
        as={Animate}
        show="animated fadeInUpBig"
        hide="animated fadeOutDownBig"
        $query={{
          'switchModuleModal': 'open',
        }}
        b="blabla"
        c="xxxxkjaksjfkld"
        m="mvc"
      />}
      <Animate
        show="animated fadeInUpBig"
        hide="animated fadeOutDownBig"
        open={state.switchModuleModal}
        b="blabla"
        c="xxxxkjaksjfkld"
        p="props-ok"
        x="y"
      />
      {
        isOrderPackage ? (
          <Connect
            as={SelfSupportTop}
            $query={{
              'env': 'env',
              'isOrderPackage': 'isOrderPackage',
              'offlineUser.username': 'username'
            }}
          />
        )
        : <Top />
      }
      <Nav json={state.CurrentUserInfo && state.CurrentUserInfo.MenuJson} />
      <Connect
        as={Tips}
        $query={{
          showTips: 'showTips',
          promptMsg: 'promptMsg'
        }}
      />
      {children}
      {!noFooter && <Footer />}
      {
        isOrderPackage && (
          <Connect
            as={LogoutConfirmModal}
            $query={{
              'logoutConfirmModal': 'visible',
            }}
          />
        )
      }
      {
        false && isOrderPackage && (
          <Connect
            as={SwitchModuleModal}
            $query={{
              'switchModuleModal': 'visible',
            }}
          />
        )
      }
      <Modal visible={loadingModal}>
        <Loading />
      </Modal>
    </div>
  )
}

Layout.contextTypes = {
  state: React.PropTypes.object
}
